<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all" />
  </head>

  <body>
    <div class="layui-fluid">
      <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">比赛ID</label>
              <div class="layui-input-block">
                <input
                  type="text"
                  name="match_id"
                  placeholder="请输入"
                  autocomplete="off"
                  class="layui-input"
                />
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">赛事类型</label>
              <div class="layui-input-block">
                <select name="category">
                  <option value="">全部</option>
                  <option value="1">体育</option>
                  <option value="2">电竞</option>
                </select>
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">赛事</label>
              <div class="layui-input-block">
                <select name="sport_id">
                  <option value="">全部</option>
                  {volist id="vo" name="sports"}
                  <option value="{$key}">{$vo}</option>
                  {/volist}
                </select>
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">状态</label>
              <div class="layui-input-block">
                <select name="match_status">
                  <option value="">全部</option>
                  <option value="1">未开赛</option>
                  <option value="2">进行中</option>
                  <option value="3">完场</option>
                </select>
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">主队</label>
              <div class="layui-input-block">
                <input
                  type="text"
                  name="home"
                  placeholder="请输入"
                  autocomplete="off"
                  class="layui-input"
                />
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">客队</label>
              <div class="layui-input-block">
                <input
                  type="text"
                  name="away"
                  placeholder="请输入"
                  autocomplete="off"
                  class="layui-input"
                />
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">比赛时间</label>
              <div class="layui-input-inline" style="width: 350px">
                <input
                  type="text"
                  name="start_time"
                  placeholder="搜索开始时间"
                  autocomplete="off"
                  class="layui-input"
                  style="width: 167px; display: inline"
                  id="start_time_input"
                />
                -
                <input
                  type="text"
                  name="end_time"
                  placeholder="搜索截止日期"
                  autocomplete="off"
                  class="layui-input"
                  style="width: 167px; display: inline"
                  id="end_time_input"
                />
              </div>
            </div>
            <div class="layui-inline">
              <button
                class="layui-btn layuiadmin-btn-matcheslist"
                lay-submit
                lay-filter="LAY-matches-front-search"
              >
                <i
                  class="layui-icon layui-icon-search layuiadmin-button-btn"
                ></i>
              </button>

              <button
                class="layui-btn"
                lay-submit
                lay-filter="LAY-matches-export"
              >
                导出
              </button>
            </div>
          </div>
        </div>

        <div class="layui-card-body">
          <table
            id="LAY-matches-match-manage"
            lay-filter="LAY-matches-match-manage"
          ></table>
          <script type="text/html" id="toolbaar">
              <div class="layui-btn-container">
                  <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="mult_start_live">勾选批量预约</button>
              </div>
          </script>
          <script type="text/html" id="table-matchlives-operation">
            {{# if(d.auto_live<=0){ }}
            <a
              class="layui-btn layui-btn-normal layui-btn-xs"
              lay-event="auto_live"
            >
              <i class="layui-icon layui-icon-form"></i>设为预约开播
            </a>
            {{# } else { }}
            <a
              class="layui-btn layui-btn-normal layui-btn-xs layui-btn-danger"
              lay-event="auto_live"
            >
              <i class="layui-icon layui-icon-form layui-btn-xs"></i
              >取消预约开播
            </a>
            {{# } }}
          </script>
        </div>
      </div>
    </div>

    <script src="/layuiadmin/layui/layui.js"></script>
    <script src="/assets/ue/third-party/jquery-1.10.2.js"></script>
    <script src="/static/clipboard.min.js"></script>
    <script>
      var $SPORTS = {:json_encode($sports, JSON_UNESCAPED_UNICODE) };
      var $ALLSTATUS = {:json_encode($all_status, JSON_UNESCAPED_UNICODE) };
      layui.config({
          base: '/layuiadmin/' //静态资源所在路径
      }).extend({
          index: 'lib/index' //主入口模块
      }).use(['index', 'matchlives', 'table', 'laydate', 'admin'], function () {
          var $ = layui.$
              , form = layui.form
              , table = layui.table
              , laydate = layui.laydate,
              admin = layui.admin;

          //执行一个laydate实例
          laydate.render({
              elem: '#start_time_input',
              type: 'datetime'
          });
          laydate.render({
              elem: '#end_time_input',
              type: 'datetime'
          });

          //监听搜索
          form.on('submit(LAY-matches-front-search)', function (data) {
              var field = data.field;

              //执行重载
              table.reload('LAY-matches-match-manage', {
                  where: field
                  , page: {
                      curr: 1   //默认从第一页开始搜索
                  },
              });
          });
          form.on('submit(LAY-matches-export)', function (data) {
              download1(data.field)
          });

          function download1(field) {
              var str = $.param(field);
              const url = '{:url("matchlives/lists")}?export=1&' + str; //记得拼接参数
              const xhr = new XMLHttpRequest();
              xhr.open('GET', url, true); // 也可以使用POST方式，根据接口
              xhr.setRequestHeader('Content-Type', 'application/octet-stream');
              xhr.responseType = 'blob'; // 返回类型blob
              xhr.onload = function (e) {
                  if (this.status === 200) {
                      const blob = this.response;
                      const reader = new FileReader();
                      reader.readAsDataURL(blob); // 转换为base64，可以直接放入a表情href
                      reader.onload = function (e) {
                          const a = document.createElement('a');
                          a.download = "比赛连接.xlsx"
                          a.href = e.target.result;
                          document.documentElement.appendChild(a);
                          a.click();
                          a.remove(); // 等价于document.documentElement.removeChild(a);
                      };
                  }
              };
              xhr.send(); // 发送ajax请求
          }

          // 复制直播地址
          table.on('tool(LAY-matches-match-manage)', function (obj) {
              var link_url = '';
              switch (obj.event) {
                  case 'copyCoverUhdUrl':
                      link_url = obj.data.uhd_link;
                      break;

                  case 'copyCoverHddUrl':
                      link_url = obj.data.hd_link;
                      break;

                  case 'copyCoverSddUrl':
                      link_url = obj.data.sd_link;
                      break;
              }
              if (!link_url) {
                  return layer.msg('连接错误，复制失败');
              }

              $(".font-primary").attr("data-clipboard-text", link_url);
              var clipboard = new ClipboardJS('.font-primary');
              clipboard.on('success', function (e) {
                  layer.msg('复制成功');
                  clipboard.destroy();  //解决多次弹窗
                  e.clearSelection();
              });
          });

          table.on("tool(LAY-matches-match-manage)", function (obj) {
              if (obj.event == 'auto_live') {
                  layer.confirm("确定要将该场赛事设为自动/取消开播吗？", function (index) {
                      layer.load();
                      admin.req({
                          url: "/admin/matchlives/auto_live?id="+obj.data.match_id,
                          success(res) {
                              layer.closeAll("loading");
                              if (res.code == 0) {
                                  table.reload("LAY-matches-match-manage");
                                  layer.msg(res.msg, { icon: 1 });
                              }
                          },
                          complete: function () {
                              layer.closeAll("loading");
                          },
                      });
                  });
              }
          })
      });
    </script>
  </body>
</html>
